<template>
	<view class="">
		<quill-editor disabled v-model="describe" class="ql-editor" />
		<view class="tips">请确保您填写资料的准确性，以便我方和您取得联系！</view>
		<view class="address-form">
			<form @submit="formSubmit">
				<view class="label-input">
					<text>企业名称</text>
					<input placeholder-style="font-size:28rpx" maxlength="64" v-model="companyName"
						@keyup="companyName = companyName.replace(/\s+/g, '')" placeholder="请输入" />
				</view>

				<view class="label-input isMargin">
					<text>联系人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="realName = realName.replace(/\s+/g, '')" v-model="realName" placeholder="姓名(必填)" />
				</view>
				<view class="label-input">
					<text>联系方式</text>
					<input placeholder-style="font-size:28rpx" maxlength="11" type="number"
						@keyup="contactNumber = contactNumber.replace(/\s+/g, '')" v-model="contactNumber"
						placeholder="联系电话(必填)" />
				</view>

				<view class="label-input isMargin" @click="checkVip">
					<text>是否会员</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="member"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>

				<view class="label-input isMargin">
					<text class="area">备注</text>
					<textarea auto-height style="margin: 0 16rpx" maxlength="200"
						@keyup="applyRemark = applyRemark.replace(/\s+/g, '')" v-model="applyRemark"
						placeholder="请输入" />
				</view>
			</form>
		</view>
		<view class="footer">
			<button type="primary" @click="submit" :style="{ background: inputAll ? '#0B4E9E' : '#CCCCCC' }">
				我有需求
			</button>
		</view>
	</view>
</template>

<script>
	import api from "api/modules/attract.js";

	export default {
		name: "Attract",
		computed: {
			inputAll: function() {
				if (this.contactNumber && this.member && this.realName) {
					return true;
				}
				return false;
			},
		},
		onLoad(params) {
			api
				.getFrontDetail({
					associationServiceId: 7,
				})
				.then((res) => {
					this.describe = res.data.serviceContent;
				});
		},
		data() {
			return {
				describe: "",
				companyName: "",
				contactNumber: "",
				inviterRealName: "",
				member: "",
				realName: "",
				applyRemark: "",
			};
		},
		mounted() {},
		methods: {
			checkVip() {
				uni.showActionSheet({
					itemList: ["是", "否"],
					success: (res) => {
						this.member = res.tapIndex == 0 ? "是" : "否";
					},
				});
			},
			submit() {
				if (!this.inputAll) {
					return;
				} else {
					if (!/^1([3456789])\d{9}$/.test(this.contactNumber)) {
						uni.showToast({
							title: "联系方式错误",
							icon: "none",
						});
						return;
					}
					api
						.applyMerchant({
							companyName: this.companyName,
							contactNumber: this.contactNumber,
							member: this.member == "是" ? true : false,
							realName: this.realName,
							inviterRealName: this.inviterRealName,
							applyRemark: this.applyRemark,
						})
						.then((res) => {
							uni.showToast({
								title: "申请成功",
								icon: "none",
							});
							this.companyName = "";
							this.contactNumber = "";
							this.member = "";
							this.realName = "";
							this.inviterRealName = "";
							this.applyRemark = "";
						});
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	page {
		background-color: #f6f6f6;
	}

	.tips {
		border-top: 1rpx solid #fff;
		padding: 20rpx 24rpx 0 24rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.ql-editor {
		background-image: url(../../../static/fund-bgc.jpg);
		background-size: contain;
		background-repeat: repeat;
	}

	.footer {
		box-sizing: border-box;
		width: 100%;
		display: flex;

		button {
			margin: 30rpx 60rpx;
			flex: auto;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			background-color: #0B4E9E;
		}
	}
</style>
